<template>
  <div class="home-find">
    <!-- banner -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide find-banner">
          <img src="../assets/imgs/02.jpeg" alt="" />
        </div>
        <div class="swiper-slide find-banner">
          <img src="../assets/imgs/09.jpeg" alt="" />
        </div>
        <div class="swiper-slide find-banner">
          <img src="../assets/imgs/06.jpeg" alt="" />
        </div>
      </div>
      <div class="swiper-pagination find-btn"></div>
    </div>
    <!-- 选项区 -->
    <div class="find-select">
      <ul>
        <li>
          <router-link to="#">
            <div class="icon">
              <i class="iconfont icon-pengyouquan"></i>
            </div>
            <span>朋友圈文案</span>
          </router-link>
        </li>
        <li>
          <router-link to="#">
            <div class="icon">
              <i class="iconfont icon-xiaoyouxi"></i>
            </div>
            <span>小游戏</span>
          </router-link>
        </li>
        <li>
          <router-link to="#">
            <div class="icon">
              <i class="iconfont icon-shijian"></i>
            </div>
            <span>每日十句</span>
          </router-link>
        </li>
        <li>
          <router-link to="#">
            <div class="icon">
              <i class="iconfont icon-new"></i>
            </div>
            <span>热词速递</span>
          </router-link>
        </li>
        <li>
          <router-link to="#">
            <div class="icon">
              <i class="iconfont icon-yuedu"></i>
            </div>
            <span>沉浸式阅读</span>
          </router-link>
        </li>
        <li>
          <router-link to="#">
            <div class="icon">
              <i class="iconfont icon-hua"></i>
            </div>
            <span>花样文字</span>
          </router-link>
        </li>

        <li>
          <router-link to="#">
            <div class="icon">
              <i class="iconfont icon-biaoqianlan_jingxuan"></i>
            </div>
            <span>小编精选</span>
          </router-link>
        </li>
        <li>
          <router-link to="#">
            <div class="icon">
              <i class="iconfont icon-huatifuhao"></i>
            </div>
            <span>话题广场</span>
          </router-link>
        </li>
      </ul>
    </div>
    <!-- 推荐专辑 -->
    <!-- <div class="find-album">
      <div class="find-nav">
        <p class="find-nav-1">推荐专辑</p>
        <div class="find-right">
          <p class="find-nav-2">更多</p>
          <i class="iconfont icon-xiangyou1"></i>
        </div>
      </div>
    </div> -->
    <comp-minlabel :title="'推荐专辑'">
      <template>
        <div class="swiper-container02 find-swiper">
          <div class="swiper-wrapper find-wrapper">
            <div class="swiper-slide find-slide">
              <img src="https://z3.ax1x.com/2021/11/03/IAnP8f.jpg" alt="" />
              <p>有时候我词不达意，但真的很高兴遇见你。</p>
            </div>
            <div class="swiper-slide find-slide">
              <img src="https://z3.ax1x.com/2021/11/03/IAulFI.jpg" alt="" />
              <p>有时候我词不达意，但真的很高兴遇见你。</p>
            </div>
            <div class="swiper-slide find-slide">
              <img src="https://z3.ax1x.com/2021/11/03/IAnP8f.jpg" alt="" />
              <p>有时候我词不达意，但真的很高兴遇见你。</p>
            </div>
            <div class="swiper-slide find-slide">
              <img src="https://z3.ax1x.com/2021/11/03/IAulFI.jpg" alt="" />
              <p>有时候我词不达意，但真的很高兴遇见你。</p>
            </div>
            <div class="swiper-slide find-slide">
              <img src="https://z3.ax1x.com/2021/11/03/IAnP8f.jpg" alt="" />
              <p>有时候我词不达意，但真的很高兴遇见你。</p>
            </div>
            <div class="swiper-slide find-slide">
              <img src="https://z3.ax1x.com/2021/11/03/IAulFI.jpg" alt="" />
              <p>有时候我词不达意，但真的很高兴遇见你。</p>
            </div>
          </div>
        </div>
      </template>
    </comp-minlabel>
    <!-- 内容区 -->
    <div class="find-content">
      <ul>
        <li v-for="(item, index) in findObj" v-bind:key="index">
          <!-- 传值 -->
          <router-link
            v-bind:to="{ name: 'Comment', query: { id: `${item.uuid}` } }"
          >
            <img :src="`${item.cover}`" alt="" />
            <p>
              {{ item.content }}
            </p>
            <span>{{ item.author }}</span>
          </router-link>
        </li>
        <!-- 点击加载更多 -->
        <p class="notxt">没有更多啦^~^</p>
      </ul>
    </div>
  </div>
</template>
<script>
import Swiper from "../assets/swiper/dist/js/swiper.min.js";
import "../assets/swiper/dist/css/swiper.min.css";
import compMinlabel from "../components/comp-minlabel.vue";
export default {
  name: "page02",
  data() {
    return {
      findObj: {},
    };
  },
  components: {
    compMinlabel,
  },
  mounted() {
    var mySwiper = new Swiper(".swiper-container", {
      autoplay: 2000, //可选选项，自动滑动
      loop: true,
      pagination: ".swiper-pagination", //分页器容器
      autoplayDisableOnInteraction: false, //用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
    });
    var mySwiper02 = new Swiper(".swiper-container02", {
      autoplay: 5000, //可选选项，自动滑动
      slidesPerView: 4,
      paceBetween: 20,
    });

    let findPro = axios.get("./data.json");
    findPro
      .then((res) => {
        // console.log(res.data.data.list);
        this.findObj = res.data.data.list;
        // 作者
        // console.log(this.obj[0].creator);
        // 相关专辑
        // console.log(this.obj[0].album);
        console.log(this.findObj[0].content);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>
<style lang="scss" scoped>
.home-find {
  overflow-x: hidden;
  background: #f8f8f8;
}
.find-banner {
  margin-top: 46px;
  width: 100%;

  img {
    width: 342px;
    height: 142px;
    margin: 14px 16px;
    border-radius: 10px;
  }
}
.find-btn {
  margin-bottom: 10px;
}
// 选项区
.find-select {
  ul {
    width: 342px;
    height: 176px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    align-content: space-around;
    justify-content: space-evenly;
    margin: 0 auto;

    li {
      a {
        display: flex;
        flex-direction: column;
        align-items: center;
        .icon {
          width: 46px;
          height: 46px;
          background: #ebf1f9;
          border-radius: 50%;
          text-align: center;
          line-height: 46px;
          i {
            font-size: 25px;
            color: #92c1fd;
          }
        }
        span {
          font-size: 12px;
          margin-top: 10px;
        }
      }
      &:hover {
        //   针对a标签移动端高亮
        -webkit-tap-highlight-color: transparent;
      }
    }
  }
}
// 推荐专辑
.find-album {
  width: 100%;
  height: 94px;
  background: rgb(255, 255, 255);
  margin-bottom: 10px;
  .find-nav {
    width: 100%;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgb(214, 214, 214);

    .find-nav-1 {
      margin-left: 15px;
      font-size: 16px;
      padding: 2px 0;
      border-bottom: 3px solid skyblue;
    }
    .find-right {
      margin-right: 10px;
      color: #ccc;
      .find-nav-2 {
        height: 100%;
        display: inline-block;
        font-size: 12px;
        height: 29px;
        line-height: 29px;
        vertical-align: middle;
      }
      i {
        font-size: 16px;
      }
    }
  }
}
.find-swiper {
  width: 100%;
  .find-wrapper {
    //   margin-left: 15px;
    margin-top: 15px;
    .find-slide {
      width: 90px;
      height: 120px;
      margin-left: 15px;
      // background: #ccc;
      img {
        width: 94px;
        height: 94px;
        border-radius: 5px;
      }
      p {
        width: 80px;
        margin: 0 auto;
        font-size: 12px;
        display: block;
        text-overflow: ellipsis; //省略号代替
        white-space: nowrap; //文本不换行
        overflow: hidden; //超出隐藏；
      }
    }
  }
}
// 内容区
.find-content {
  width: 100%;
  margin-bottom: 56px;
  ul {
    width: 344px;
    margin: 0 auto;
    border-radius: 7px;

    li {
      width: 310px;
      padding: 16px 17px;
      border: 1px solid rgb(238, 238, 238);
      box-shadow: 0 0 3px #bbb;
      background: #fff;
      margin-bottom: 10px;
      border-radius: 7px;
      //   box-sizing: border-box;
      img {
        margin-bottom: 16px;
        width: 310px;
        height: 176px;
        border-radius: 7px;
      }
      p {
        font-size: 16px;
        width: 100%;
        letter-spacing: 1.8px;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
      }
      span {
        width: 100%;
        display: inline-block;
        text-align: right;
        letter-spacing: 1.8px;
        font-size: 12px;
        margin: 12px 0;
      }
    }
  }
}
.notxt {
  width: 100%;
  text-align: center;
  font-size: 16px;
  margin: 30px 0 100px;
  color: #ccc;
}
</style>